<template>
	<el-space wrap :size="6" class="tools-wrapper">
		<!-- 设置 -->
		<div class="tools--item">
			<el-icon @click="openSettingDrawer(true)">
				<Setting />
			</el-icon>
		</div>
		<!-- 全屏 -->
		<div class="tools--item">
			<el-icon @click="toggleFullScreen">
				<FullScreen />
			</el-icon>
		</div>
		<!-- 国际化 -->
		<div class="tools--item">
			<el-icon>
				<Promotion />
			</el-icon>
		</div>
		<el-popover placement="bottom" trigger="click" :teleported="false">
			<template #reference>
				<div class="tools--item">
					<el-avatar :size="32">
						<el-icon>
							<User />
						</el-icon>
					</el-avatar>
				</div>
			</template>
			<div class="el-popover--item">
				<el-icon>
					<User />
				</el-icon>用户中心
			</div>
			<div class="el-popover--item">
				<el-icon>
					<Setting />
				</el-icon>用户设置
			</div>
			<div class="el-popover--item" @click="handleLogout">
				<el-icon>
					<SwitchButton />
				</el-icon>登出登录
			</div>
		</el-popover>
	</el-space>

	<!-- layout drawer -->
	<div>
		<el-drawer size="400" v-model="currentSettingDrawer" :direction="'rtl'" show-close :close-on-click-modal="false"
			@close="openSettingDrawer(false)">
			<template #title>
				<div class="fs-16">偏好设置<span class="fs-12">自定义偏好设置 & 实时预览</span></div>
			</template>
			<div class="drawer-content">
				<div class="drawer-content__content">
					<el-divider>主题</el-divider>
					<!-- 主题 -->
					<div class="theme-wrap">
						<el-switch v-model="currentTheme" active-text="亮" inactive-text="暗" active-value="light"
							inactive-value="dark" inline-prompt
							@change="(value: 'light' | 'dark') => toggleTheme(value)">
							<template #active-action>
								<span class="custom-active-action">🌞</span>
							</template>
							<template #inactive-action>
								<span class="custom-inactive-action">🌜</span>
							</template>
						</el-switch>
					</div>
					<el-divider>布局</el-divider>
					<div class="layout-grid">
						<div v-for="(item, index) in layouts" :key="index"
							:class="['layout-item', { 'active': currentLayout === item.index }]"
							@click="toggleLayout(item.index)">
							<div class="layout-image">
								<SvgIcon :name="item.icon" width="96" height="56" />
							</div>
							<div class="layout-info">
								<span class="fs-12">{{ item.name }}</span>
								<el-tooltip :content="item.tip" placement="bottom">
									<el-icon>
										<QuestionFilled />
									</el-icon>
								</el-tooltip>
							</div>
						</div>
					</div>
				</div>
				<el-space direction="vertical">
					<el-button type="danger" @click="handleLogout">清除缓存并退出</el-button>
				</el-space>
			</div>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/stores';
import SvgIcon from '@/components/common/svgIcon.vue';

defineComponent({ name: 'NavbarTool' });

const themeStore = useThemeStore();
const { currentSettingDrawer, currentTheme, currentLayout } = storeToRefs(themeStore);
const { toggleSettingDrawer, toggleTheme, toggleLayout } = themeStore;

// 设置
const openSettingDrawer = (value: boolean) => {
	toggleSettingDrawer(value);
};
// 布局
const layouts = [
	{
		icon: 'layout-sider',
		index: 'default',
		name: '侧边导航',
		tip: '顶部通栏，侧边导航栏布局'
	},
	{
		icon: 'layout-mixin',
		index: 'mixin',
		name: '混合垂直',
		tip: '垂直水平菜单共存'
	}
];
// 全屏
const toggleFullScreen = () => {
	if (!document.fullscreenElement) {
		document.documentElement.requestFullscreen();
	} else {
		document.exitFullscreen();
	}
};

// logout
const router = useRouter();
const handleLogout = () => {
	sessionStorage.clear();
	toggleSettingDrawer(false);
	router.replace({ path: '/' });
};
</script>

<style scoped lang="scss">
@use '@/assets/style/mixin' as mixin;
@include mixin.reset-el-drawer;

.tools-wrapper {
	display: inline-flex;
	flex-grow: 1;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 0 !important;
	gap: 6px;

	.tools--item {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0 12px;
		border-radius: 6px;
		height: 36px;
		cursor: pointer;

		.el-icon {
			font-size: 18px;
		}
	}

	:deep(.el-popover) {
		width: 120px !important;
		min-width: 120px;
	}

	.el-popover--item {
		height: 36px;
		line-height: 36px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
	}
}

.theme-wrap {
	text-align: center;
}

.drawer-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;

	.layout-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, 100px);
		gap: 16px;
		padding: 16px;

		.layout-item {
			width: 100%; // 添加这行
			max-width: 100%; // 添加这行
			border: 2px solid #ebeef5;
			border-radius: 8px;
			display: flex;
			height: 98px;
			flex-direction: column;
			cursor: pointer;
			transition: all 0.3s ease;

			&:hover {
				border-color: #409eff;
			}

			&.active {
				border: 2px solid #409eff;
				box-shadow: 0 0 8px rgba(64, 158, 255, 0.3);
			}

			.layout-image {
				flex: 1;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.layout-info {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 28px;
				font-size: 14px;
				border-top: 1px solid #ebeef5;
				background-color: #f5f7fa;
				border-bottom-left-radius: 8px;
				border-bottom-right-radius: 8px;

				.el-icon {
					color: #909399;
					cursor: pointer;

					&:hover {
						color: #409eff;
					}
				}
			}
		}
	}
	:deep(.el-space__item) {
		width: 100%;
	}
}
</style>
